<template>
  <Card :tab-list="tabListTitle" v-bind="$attrs" :active-tab-key="activeKey" @tabChange="onTabChange">
    <p v-if="activeKey === 'AllMoney'">
      <AllMoneyBar :allMoneyData="allMoneyData" />
    </p>
    <p v-if="activeKey === 'ALLQuantity'">
      <ALLQuantityBar :aLLQuantityData="aLLQuantityData" />
    </p>
    <p v-if="activeKey === 'times'">
      <TimesBar :timesData="timesData" />
    </p>
  </Card>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { Card } from 'ant-design-vue';
  import AllMoneyBar from './AllMoneyBar.vue';
  import ALLQuantityBar from './ALLQuantityBar.vue';
  import TimesBar from './TimesBar.vue';
  import { Item } from '../data';
  import { getDormMonthStatistic } from '../api';

  const allMoneyKey = 'AllMoney'; // 充值金额
  const aLLQuantityKey = 'ALLQuantity'; // 充电度数
  const timesKey = 'times'; // 充电次数
  const allMoneyData = ref({}); // 充值金额
  const aLLQuantityData = ref({}); // 充电度数
  const timesData = ref({}); // 消费次数
  const activeKey = ref(allMoneyKey);
  const tabListTitle = [
    {
      key: allMoneyKey,
      tab: '充值金额统计',
    },
    {
      key: aLLQuantityKey,
      tab: '充电度数统计',
    },
    {
      key: timesKey,
      tab: '充电次数统计',
    },
  ];

  // const groupedData = (dataArray: Item[]) => {
  //   return dataArray
  //     .filter((item) => item.dataCallStoredProcedure === 'Electric_EveryMonth')
  //     .reduce((acc: any[], curr: { dataYear: string | number }) => {
  //       const year = curr.dataYear;

  //       // 检查年份是否已经在结果中
  //       let yearGroup = acc.find((item: { year: string | number }) => item.year === year);

  //       // 如果没有，则创建一个新的年份组
  //       if (!yearGroup) {
  //         yearGroup = { year: year, statisticsVOList: [] };
  //         acc.push(yearGroup);
  //       }

  //       // 将当前对象添加到对应年份的数组中
  //       yearGroup.statisticsVOList.push(curr);

  //       return acc;
  //     }, []);
  // };

  const getDormMonthStatisticFun = async () => {
    const res = await getDormMonthStatistic({});
    // const formatRes = groupedData(res);
    const allMoneyDataO = {};
    const aLLQuantityDataO = {};
    const timesDataO = {};
    res.forEach((element: { year: string | number; statisticsVOList: Item[] }) => {
      element.statisticsVOList.forEach((item) => {
        if (!allMoneyDataO[element.year]) allMoneyDataO[element.year] = [];
        if (!aLLQuantityDataO[element.year]) aLLQuantityDataO[element.year] = [];
        if (!timesDataO[element.year]) timesDataO[element.year] = [];
        const dataValue = JSON.parse(item.dataValue);
        allMoneyDataO[element.year].push({ ...item, dataValue: Number(dataValue[allMoneyKey]) });
        aLLQuantityDataO[element.year].push({ ...item, dataValue: Number(dataValue[aLLQuantityKey]) });
        timesDataO[element.year].push({ ...item, dataValue: Number(dataValue[timesKey]) });
      });
    });
    allMoneyData.value = allMoneyDataO;
    aLLQuantityData.value = aLLQuantityDataO;
    timesData.value = timesDataO;
  };

  function onTabChange(key: string) {
    activeKey.value = key;
  }

  getDormMonthStatisticFun();
</script>
